<template>
  <div class="row">
    <div class="col-3">
      <h3 class="h3_title">基础组件</h3>
      <draggable
        class="dragArea list-group"
        :list="list1"
        :clone="clone"
        :group="{ name: 'people', pull: 'clone', put: false }"
        @change="start"
      >
        <div class="list-group-item" v-for="element in list1" :key="element.id">
          <div class="modle_name" v-if="element.name=='搜索'">
            <p ><img src="@/assets/image/search (1).png" alt=""></p>
            <p>{{ element.name }}</p>
          </div>
          <div class="modle_name" v-if="element.name=='商品'">
            <p ><img src="@/assets/image/shop.png" alt=""></p>
            <p>{{ element.name }}</p>
          </div>
          <div class="modle_name" v-if="element.name=='图片广告'">
            <p ><img src="@/assets/image/iamges.png" alt=""></p>
            <p>{{ element.name }}</p>
          </div>
        </div>
      </draggable>
    </div>
    <div class="col-3">
      <div class="content">
        <div class="top_image"><img src="@/assets/image/phoneTop.png" alt=""></div>
        <div class="title-modle"><span>页面标题</span></div>
        <draggable class="dragArea2" :list="list2" group="people" @change="start">
          <div class="list-group-item2" v-for="element in list2" :key="element.id">
            <div class="item_modle"  v-if="element.name=='搜索'"><searchVue/> <div class="overlay" v-if="element.name=='搜索'" @click="deleteItem(element.id)"><button class="delete-btn">删除</button></div></div>
            <div class="item_modle"  v-if="element.name=='商品'"><productsVue/><div class="overlay" v-if="element.name=='商品'" @click="deleteItem(element.id)"><button class="delete-btn">删除</button></div></div>
            <div class="item_modle"  v-if="element.name=='图片广告'"><imagesVue/><div class="overlay" v-if="element.name=='图片广告'" @click="deleteItem(element.id)"><button class="delete-btn">删除</button></div></div>
          </div>
        </draggable>
        <div class="ceshi">iphone8高度</div>
      </div>
    </div>
    <div class="col-3">
      <button @click="dialogVisible=true">页面预览</button>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="375px">
       <div class="top_image"><img src="@/assets/image/phoneTop.png" alt=""></div>
        <div class="list-group-item2" v-for="element in list2" :key="element.id">
            <div class="item_modle"  v-if="element.name=='搜索'"><searchVue/></div>
            <div class="item_modle"  v-if="element.name=='商品'"><productsVue/></div>
            <div class="item_modle"  v-if="element.name=='图片广告'"><imagesVue/></div>
          </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      </span>
    </el-dialog>
  </div> 
</template>

<script>
import draggable from "vuedraggable";
import rawDisplayer from "@/components/Drag/raw-displayer.vue";
import searchVue from "./components/search.vue";
import productsVue from './components/products.vue';
import imagesVue from './components/images.vue';
let idGlobal = 8;

export default {
  name: "clone-on-control",
  display: "Clone on Control",
  instruction: "Press Ctrl to clone element from list 1",
  order: 4,
  components: {
    draggable,
    rawDisplayer,
    searchVue,
    productsVue,
    imagesVue
  },
  data() {
    return {
      list1: [
        { name: "搜索", id: 1 },
        { name: "商品", id: 2 },
        { name: "图片广告", id: 3 },
      ],
      list2: [],
      dialogVisible:false,
    };
  },
  methods: {
    clone({ name }) {
      return { name, id: idGlobal++ };
    },
    start(evt) {
      window.console.log(evt);
    },
     deleteItem(itemId) {
      console.log(123);
      console.log(this.list2);
      // 根据 itemId 从 list2 中删除相应的项
      const index = this.list2.findIndex(item => item.id == itemId);
      if (index !== -1) {
        this.list2.splice(index, 1);
      }
      this.hideDeleteButton();
    },
  },
};
</script>
<style lang="scss" scoped>
.row{ 
  background-color: #f6f6f6;
  margin-left: 0px;
  height: 100%;
  .col-3{ 
    padding: 0;
    margin-left: 15px;
    .h3_title{ 
      padding-left: 20px;
      padding-bottom: 20px;
      background-color: #fff;
      margin-bottom: 0px;
    }
  }
  .col-3:first-child{ 
    min-height: 667px;
    margin-left: 0px;
    background-color: #fff;
  }
 .col-3:nth-child(2){ 
  background-color: #f9f9f9;
  min-height: 667px;
  margin-left:20%;
  max-width: 375px;
 }
}
.title-modle{ 
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  max-width: 375px;
  span:first-child{ 
    padding-left: 16px;
  }
  span:last-child{ 
    flex: 1;
    text-align: center;
    padding-right: 27px;
  }
}
.top_image{ 
  max-width: 375px;
  img{ 
    width: 100%;
  }
}
.dragArea{ 
  // min-height: 450px;
  // background-color: #fff;
  display: flex;
  // justify-content: space-around;
  flex-direction: row;
  flex-wrap: wrap;
  .list-group-item{ 
    border: 0px;
    flex: 0 0 25%; 
    max-width: 25%; 
    .modle_name{
      display: flex;
      flex-direction: column;
      align-items: center;
      p:first-child{ 
        width: 35px;
        margin-bottom: 0px;
        img{
          width: 100%;
        }
      }
    }
  }
}
.dragArea2 {
  max-height: 732px;
  overflow-y: scroll; /* 或者使用 overflow-y: auto; */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  background-color: #f9f9f9;
  // box-shadow: 5px 0 5px rgba(0, 0, 0, 0.1), -5px 0 5px rgba(0, 0, 0, 0.1);
  // box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  .item_modle{ 
    position: relative;
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩层 */
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }
    .delete-btn {
      // position: absolute;
      // top: 50%;
      // left: 50%;
      // transform: translate(-50%, -50%);
      // background-color: red;
      // color: white;
      // border: none;
      // padding: 5px 10px;
      // border-radius: 5px;
      // cursor: pointer;
      // display: none; /* 默认隐藏 */
      background-color: red;
      color: white;
      border: none;
      padding: 8px 16px;
      cursor: pointer;
    }
  }
  .item_modle:hover .overlay  {
    // display: block; /* 鼠标移入时显示删除按钮 */
     opacity: 1;
  }
  
}
.dragArea2::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.ceshi{
  position: absolute;
  top: 643px;
  left:-95px ;
  border-bottom: 0.5px dashed #666 ;
}
</style>
